<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>藏书阁</title>
    <link rel="stylesheet" href="./css/library.css">
    <!-- 引入图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3329812_875cpifco4l.css">
    <!-- 引入字体 -->
    <link rel="stylesheet" href="./css/fontsize.css">
    <!-- 引入滚动 -->
    <!-- 引入 scrollreveal -->
    <script src="https://unpkg.com/scrollreveal"></script>
    <script src="./js/library.js"></script>
<!--    引入jquery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>

    <div class="center1">
        <!-- 导航栏 -->
        <div class="nav">
            <a th:href="@{/desk.html}" class="active"><i class="iconfont icon-shouye"></i>首页</a>
            <a href="#" class="active"><i class="iconfont icon-sousuo"></i>搜索</a>
            <a th:href="@{/library}" class="active special"><i class="iconfont icon-shezhi"></i>藏书阁</a>
            <a th:href="@{/libraryCard}" class="activey active"><i class="iconfont icon-guanyu"></i>借书证</a>
        </div>
    </div>
    <div class="center3">
        <div class="book-novel">
            <!-- 搜索框 -->
            <form class="nav-search" name="search" th:action="@{/library}" method="get" >
                <div class="nav-form-group">
                    <label class="booksname">书名</label>
                    <input type="text" id="bookName" class="form-control" placeholder="搜索书名" name="bookName" th:value="${bookName}">
                </div>
                <div class="nav-form-group">
                    <label class="booksname">类型</label>
                    <input type="text" id="category" class="form-control" placeholder="搜索类型" name="category" th:value="${category}">
                </div>
                <div class="nav-form-group">
                    <label class="booksname" >作者</label>
                    <input type="text" class="form-control" id ="author" placeholder="搜索作者" name="author" th:value="${author}">
                    <input type="submit" value="搜索" />
                    <input type="reset" value="清空" id="clearly"/>
<!--                    <button >搜索</button>-->
                </div>

            </form>
            <!-- 提示公告 -->
            <div class="tip">
                <p>
                    <i class="iconfont icon-laba"></i>
                    尊敬的读者:<br>每次最多能借8本书,借书期限最长为30天
                </p>
            </div>



            <!-- 借书遮盖层 -->
            <div class="container">
                <!-- 弹出框 -->

                <div class="container-content">
                    <div class="content-detail">
                        <p>确定要借这本书吗?</p>
                    </div>
                    <!-- value：后台保存的值 -->
                    <button class="decoration determine" type="submit" id="determine">确定</button>
                    <button class="decoration canle">取消</button>
                </div>
            </div>

            <!-- 借书成功遮盖层 -->
            <div class="container1">
                <!-- 弹出框 -->
                <div class="container1-content1">
                    <div class="content1-detail">
                        <p><i class="iconfont icon-chenggong"></i>借书成功!</p>
                    </div>
                </div>
            </div>

            <div class="container2">
                <div class="container2-content2">
                    <div class="content2-detail">
                        <p><i class="iconfont icon-shibai"></i>借书失败!</p>
                    </div>
                </div>
            </div>


            <!-- 表格 -->
<!--            <form action="">-->

            <div class="importants">

                <table border="1" cellpadding="0" cellspacing="0" class="tables">
                    <!-- 表头 -->
                    <tr class="firstTr">
                        <th width="5%" class="displayid">id</th>
                        <th width="5%">编号</th>
                        <th width="10%">书名</th>
                        <th width="5%">书号</th>
                        <th width="10%">作者</th>
                        <th width="8%">出版社</th>
                        <th width="8%">类型</th>
                        <th width="5%">定价</th>
                        <th width="20%">内容简介</th>
                        <th width="10%">操作</th>
                    </tr>

<!--                    <c:forEach var="news" items="${newslist}" varStatus="status">-->
                        <tr class="realitic-content" th:each="book,stats:${pageInfo.getList()}">
                            <td class="displayid" >
                                [[${book.bookId}]]
                            </td>
                            <td name="userId" class="displayid" th:value="${session.User.userId}">[[${session.User.userId}]]</td>
                            <td>
                                [[${stats.count}]]
                            </td>
                            <td>
                                [[${book.bookName}]]
                            </td>
                            <td>
                                [[${book.bookISBN}]]
                            </td>
                            <td>
                                [[${book.author}]]
                            </td>

                            <td>
                                [[${book.publisher}]]
                            </td>
                            <td>
                                [[${book.category}]]
                            </td>
                            <td>
                                [[${book.money}]]
                            </td>
                            <td>
                                [[${book.text}]]
                            </td>
                            <td>

<!--                                <button id="button" class="detail">详情</button>-->
                                <button class="detail borrow" id="borrow" th:value="${book.bookId}"> 借书</button>
                                <!-- <span><a href="#" class="detail back"> 还书</a></span> -->
                            </td>
                        </tr>
                    <div class="proceeding">
                    <p >当前 <span th:text="${pageInfo.pageNum}"></span> 页,
                        总 <span th:text="${pageInfo.pages}"></span> 页,
                        共 <span th:text="${pageInfo.total}"></span> 条记录
                    </p>
                    </div>
                </table>

            </div>
<!--            </form>-->
            <div class="page-normal" >
                <!--                <span class="page-prev">&lt;</span>-->
                <!--                <span class="page-current" >1</span>-->
                <a th:class="${num==pageInfo.pageNum?'page-current':''}" th:each="num:${#numbers.sequence(1,pageInfo.pages)}"
                   th:href="@{/library(pageNum=${num},bookName=${bookName},category=${category},author=${author})}" >[[${num}]]</a>
                <!--                <a href="#">3</a>-->
                <!--                <a href="#">4</a>-->
                <!--                <a href="#">&gt;</a>-->
            </div>


        </div>
    </div>
</body>

</html>